<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>html5</title>
    <style type="text/css">
        canvas { border:1px purple solid; }
    </style>
</head>
<body>
<div id="page">
    <canvas width="300" height="300" id="t1"></canvas>
    <canvas width="300" height="300" id="t2"></canvas>
    <canvas width="300" height="300" id="canvas"></canvas>
</div><!-- #page end -->
<script type="text/javascript">
//<![CDATA[
var c=document.getElementById("t1");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";

cxt.globalCompositeOperation = 'xor';
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
cxt.moveTo(110,110);
cxt.fillStyle="blue";
cxt.beginPath();
cxt.arc(130,130,25,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

/*
var grd=cxt.createLinearGradient(10,200,195,250);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(10,200,185,50);

function roundedRect(ctx,x,y,width,height,radius,d,w,h){
  ctx.beginPath();
  ctx.moveTo(x,y+radius);
  ctx.lineTo(x,y+height-radius);
  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
  //begin
  ctx.lineTo(x+d+w/2,y+height);
  ctx.quadraticCurveTo(x+d+w/2,y+height+h,x+d,y+height+h);
  ctx.quadraticCurveTo(x+d+w,y+height+h,x+d+w,y+height);
  //end
  ctx.lineTo(x+width-radius,y+height);
  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
  ctx.lineTo(x+width,y+radius);
  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
  ctx.lineTo(x+radius,y);
  ctx.quadraticCurveTo(x,y,x,y+radius);
  ctx.stroke();
}
cxt.clearRect(0,0,300,300);
roundedRect(cxt, 10, 10, 200, 100, 30, 50, 60, 20);

function heart(ctx){
    ctx.beginPath();
    ctx.moveTo(75,40);
    ctx.bezierCurveTo(75,37,70,25,50,25);
    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
    ctx.bezierCurveTo(20,80,40,102,75,120);
    ctx.bezierCurveTo(110,102,130,80,130,62.5);
    ctx.bezierCurveTo(130,62.5,130,25,100,25);
    ctx.bezierCurveTo(85,25,75,37,75,40);
    ctx.fill();
}
cxt.clearRect(0,0,300,300);
//heart(cxt);

var c=document.getElementById("t2");
var cxt2=c.getContext("2d");
var img=new Image();
img.src="flower.png";
//img.src = "";
img.onload = function(){
    //cxt2.drawImage(img,10,130,204,104);
    //cxt2.drawImage(img,2,2,100,100,10,10,100,100);
};
function draw() {
    var ctx = document.getElementById('t2').getContext('2d');
    // draw background
    ctx.fillStyle = '#FD0';
    ctx.fillRect(0,0,75,75);
    ctx.fillStyle = '#6C0';
    ctx.fillRect(75,0,75,75);
    ctx.fillStyle = '#09F';
    ctx.fillRect(0,75,75,75);
    ctx.fillStyle = '#F30';
    ctx.fillRect(75,75,75,75);
    ctx.fillStyle = '#fff';

    // set transparency value
    ctx.globalAlpha = 0.2;
    // Draw semi transparent circles
    for (var i=0;i<7;i++){
        ctx.beginPath();
        ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
        ctx.fill();
    }
}
*/
function draw() {
    var ctx = document.getElementById('t2').getContext('2d');

    var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
    radgrad2.addColorStop(0, '#FF5F98');
    radgrad2.addColorStop(0.75, '#FF0188');
    radgrad2.addColorStop(1, 'rgba(255,1,136,0)');

    var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
    radgrad3.addColorStop(0, '#00C9FF');
    radgrad3.addColorStop(0.8, '#00B5E2');
    radgrad3.addColorStop(1, 'rgba(0,201,255,0)');

    ctx.fillStyle = radgrad3;
    ctx.fillRect(0,0,150,150);
    ctx.fillStyle = radgrad2;
    ctx.fillRect(0,0,150,150);
}
/*
function draw() {
    var ctx = document.getElementById('t2').getContext('2d');
    var img = new Image();
    img.src = 'flower.png';
    img.onload = function(){
        ctx.fillStyle = ctx.createPattern(img,'repeat');
        ctx.fillRect(0,0,300,300);
    }
}
function draw() {
    var ctx = document.getElementById('t2').getContext('2d');

    ctx.shadowOffsetX = 4;
    ctx.shadowOffsetY = 4;
    ctx.shadowBlur = 2;
    ctx.shadowColor = "rgba(0, 0, 0, 0.5)";

    ctx.font = "30px Times New Roman";
    ctx.fillStyle = "Black";
    ctx.translate(4,20);
    ctx.rotate(Math.PI/180*90);
    ctx.scale(1,2);
    var sin = Math.sin(Math.PI/6);
    var cos = Math.cos(Math.PI/6);
    ctx.transform(cos, sin, -sin, cos, 0, 0);
    ctx.fillText("Sample String ", 50, -50);
}
function draw() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var sin = Math.sin(Math.PI/6);
    var cos = Math.cos(Math.PI/6);
    ctx.translate(200, 200);
    var c = 0;
    for (var i=0; i<=12; i++) {
        c = Math.floor(255 / 12 * i);
        ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
        ctx.transform(cos, sin, -sin, cos, 0, 0);
        ctx.fillRect(0, 0, 100, 10);
    }

    ctx.setTransform(-1, 0, 0, 1, 200, 200);
    ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
    ctx.fillRect(0, 50, 100, 100);
}
*/

draw();
/*
var lineargradient = cxt.createLinearGradient(10,10,140,140);
lineargradient.addColorStop(0,'white');
lineargradient.addColorStop(1,'black');
var lineargradient2 = cxt.createLinearGradient(50,50,100,100);
lineargradient2.addColorStop(0,'black');
lineargradient2.addColorStop(1,'white');
cxt.fillStyle = lineargradient;
cxt.strokeStyle = lineargradient2;
cxt.fillRect(10,10,130,130);
cxt.strokeRect(50,50,50,50);
*/

//]]
</script>
</body>
</html>
